<template>
  <div class="flex justify-between">
    <div class="tb flex pr-15px flex-shrink-0">
     <div><el-icon size="25px"><Expand /></el-icon></div>
      <el-breadcrumb class="breadcrumb ml-10px" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> 首页 </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(name,id) in breadcrumbList" :key="id"> {{ name.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <div class="flex">
      <div class="pr-15px flex items-center">
        <el-icon size="20px"><FullScreen /></el-icon>
      </div>
      <div class="pr-15px flex items-center">
        <el-icon size="20px"><Rank /></el-icon>
      </div>
      <div class="pr-15px flex items-center">
        <el-icon size="20px"><Bell /></el-icon>
      </div>
      <el-image
        class="img items-center mt-[2px]"
        style="width: 40px; height: 40px"
        :src="url"
        :fit="fit"
      />
      <el-icon class="pt-[35px]"><CaretBottom /></el-icon>
    </div> -->
  </div>
</template>
   

<script setup>
import {
  Expand,
  CaretBottom,
  FullScreen,
  Rank,
  Bell,
} from "@element-plus/icons-vue";

import { useRoute } from "vue-router";
import {ref, watch} from "vue"
const route = useRoute()
const breadcrumbList = ref([])
watch(route, (to) => {
  breadcrumbList.value  = to.matched.filter(iteme=>iteme.meta.title!=='首页')
}, { immediate: true })
console.log(breadcrumbList, "3333333333333333333");

</script>

<style>
.tb {
  cursor: pointer;
  align-items: center;
}
.breadcrumb {
  line-height: 50px;
}
.img {
  border-radius: 8px;
}
</style>